<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding:0;
			}	
			.box1{
				width: 800px;
				height: 800px;
				background-color: silver;
				}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				animation: 2s test infinite;
		   /*animation-name：动画执行的名字
			 animation-duration： 动画的执行时间
			 animation-delay：动画的延迟时间
			 animation-timing-function：动画的执行方式，匀速还是变速
			 animation-iteration-count 动画的执行次数  infinite 无限执行
			 animation-direction：指定动画运行的方向
			     可选值：
			     normal 默认值 从from到to运行，每次都是这样
			     reverse 从to向from运行 每次都是这样
			     alternate 从from到to 重复执行动画时反向执行
			     alternate-reverse 从to向from运行 重复执行动画时反向执行
			     
			 animation-play-state：设置动画的执行状态
			 可选值：
			   running 默认值 动画执行
			   paused 动画暂停
			 .box1：hover .box2{animation-play-state：paused；}
			 
			 
			 animation-fill-mode：动画的填充模式
			   可选值：
			    none 默认值 动画执行完毕元素回到原来的位置
			    forwards 动画执行完毕后元素会停止在动画结束的位置
			    bakcwards 动画延迟等待时，元素会处于开始位置
			    both 结合了forwards和backwards
			 
			 animation-iteration-count：5；不加单位
			 
			 
			 简写竖向和过渡一样，只有时间有限制，第一个是动画时间，第二个才是延迟时间
			   animation：test 2s 2 1s alternate；
			 */
			}
			
		
		
			/*.box1:hover .box2{
				width: 200px;
				height: 200px;
				margin-left: 700px;
			}*/
			
			
			/*
			 * 动画
			 * 	动画和过渡类似，都是可以实现一些动态的效果，不同的是
			 * 过渡需要在某个属性发生变化时才会触发
			 * 动画可以自动触发动态效果
			 * 
			 *   设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
			 */
			@keyframes test{
				/*from表示动画的开始位置，也可以使用0%*/
				from{
					margin-left: 0;
				}
				/*to表示动画的结束位置，也可以使用100%*/
				to{
					margin-left: 700px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			
		</div>
	</body>
</html>
